<template>
  <div class="projectInfo-comp-ct c_page">
    <van-nav-bar :title="componentName" left-arrow @click-left="goback"></van-nav-bar>
    <div class="c_container main_container">
      <div class="l_menu">
        <div
          class="menu_item"
          v-for="(item,idx) in menuList"
          :key="idx"
          :class="{'active':active_idx==idx}"
          @click="active_idx=idx"
        >{{ item.name }}</div>
      </div>
      <div class="l_container" v-show="active_idx==0">
        <div class="base_btn" @click="open('bj_baseInfo')">
          <van-icon name="newspaper-o" />
          <p>项目基本信息</p>
        </div>
        <div class="base_btn" @click="open('bj_buildInfo')">
          <van-icon name="notes-o" />
          <p>防空地下室基本建设情况</p>
        </div>
        <div class="base_btn" @click="open('defenseUnit')">
          <van-icon name="warn-o" />
          <p>防护单元明细</p>
        </div>
      </div>
      <div class="l_container" v-show="active_idx==1">
        <dwCard v-for="item in dwList" :key="item.id" :dwInfo="item" @showUsers="show_user"></dwCard>
      </div>
      <div class="l_container" v-show="active_idx==2">page_附件信息</div>
      <div class="l_container" v-show="active_idx==3">page_项目文书</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "projectInfo",
  data() {
    return {
      componentName: "质量监督登记信息查看",
      projectId: "0",
      type_id: "0",
      menuList: [
        { name: "基本信息" },
        { name: "从业单位" },
        { name: "附件信息" },
        { name: "项目文书" }
      ],
      active_idx: 0,
      dwList: [
        {
          id: "0",
          type: "防护设备生产单位",
          name: "单位名称",
          corporation: "公司法人",
          certification: "资质证书",
          telephone: "联系电话",
          mail: "1231234@123.com"
        },
        {
          id: "1",
          type: "防护设备生产单位",
          name: "单位名称",
          corporation: "公司法人",
          certification: "资质证书",
          telephone: "联系电话",
          mail: "1231234@123.com"
        },
        {
          id: "2",
          type: "防护设备生产单位",
          name: "单位名称",
          corporation: "公司法人",
          certification: "资质证书",
          telephone: "联系电话",
          mail: "1231234@123.com"
        },
        {
          id: "3",
          type: "防护设备生产单位",
          name: "单位名称",
          corporation: "公司法人",
          certification: "资质证书",
          telephone: "联系电话",
          mail: "1231234@123.com"
        }
      ]
    };
  },
  methods: {
    goback() {
      this.$router.back(-1);
    },
    show_user(dwid) {
      // Toast('建设中！'+dwid)
      this.$router.push({
        name: "personList",
        params: { dwid: dwid }
      });
    },
    open(target) {
      this.$router.push({
        name: target,
        params: {
          pid: this.projectId
        }
      });
    }
  },
  mounted() {
    this.projectId = this.$route.params.pid;
    this.type_id = this.$route.params.tid;
  }
};
</script>
<style lang="scss" scoped>
.projectInfo-comp-ct {
  .main_container {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    .l_menu {
      flex: 1;
      background-image: linear-gradient(rgb(100, 186, 230), rgb(18, 101, 209));
      .menu_item {
        line-height: 50px;
        font-weight: bold;
        color: #fff;
        font-size: 0.9rem;
      }
      .active {
        background-color: #fff;
        color: rgb(26, 86, 197);
      }
    }
    .l_container {
      flex: 3;
      // overflow-x: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
  }
  .base_btn {
    min-height: 180px;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .van-icon {
      font-size: 50px;
      // font-weight: bold;
      color: rgb(17, 75, 184);
    }
    p {
      margin-block-start: 0.3rem;
      margin-block-end: 0.3rem;
    }
  }
}
</style>
